<!DOCTYPE html>
<html>
<head>
    <title>灵人直播控制系统用户端</title>
    <link href = "{{ url_for('static', filename = 'bootstrap.min.css') }}" rel="stylesheet">
    <link rel="shortcut icon" type="image/svg+xml" href = "{{ url_for('static', filename = 'icon/favicon.ico') }}" />
    <script src = "{{ url_for('static', filename = 'jquery-3.6.0.min.js') }}"></script>
    <script src = "{{ url_for('static', filename = 'index.js') }}"></script>
</head>
<body>
    <div class="container mt-5">
        <h2>灵人直播控制系统用户端</h2>
        <ul class = "nav nav-tabs mb-3" id = "myTab" role = "tablist">
          <li class = "nav-item" role = "presentation">
            <button class = "nav-link active" id = "home-tab" data-bs-toggle = "tab" type = "button" role = "tab" aria-controls = "scene-1" aria-selected = "true" onclick = 'selectScene("scene-1")'>场景-1</button>
          </li>
          <li class = "nav-item" role = "presentation">
            <button class = "nav-link" id = "profile-tab" data-bs-toggle = "tab" type = "button" role = "tab" aria-controls = "scene-2" aria-selected = "false" onclick = 'selectScene("scene-2")'>场景-2</button>
          </li>
          <li class = "nav-item" role = "presentation">
            <button class = "nav-link" id = "contact-tab" data-bs-toggle = "tab" type = "button" role = "tab" aria-controls = "scene-3" aria-selected = "false" onclick = 'selectScene("scene-3")'>场景-3</button>
          </li>
          <li class = "nav-item" role = "presentation">
            <button class = "nav-link" id = "contact-tab" data-bs-toggle = "tab" type = "button" role = "tab" aria-controls = "scene-4" aria-selected = "false" onclick = 'selectScene("scene-4")'>场景-4</button>
          </li>
          <li class = "nav-item" role = "presentation">
            <button class = "nav-link" id = "contact-tab" data-bs-toggle = "tab" type = "button" role = "tab" aria-controls = "scene-5" aria-selected = "false" onclick = 'selectScene("scene-5")'>场景-5</button>
          </li>
        </ul>
        <div class = "mb-3">
            <label for = "livePlatformSelect" class = "form-label">选择开播平台</label>
            <select class = "form-select" id = "livePlatformSelect" onchange = "selectLivePlatform()">
                <option value = "">选择开播平台</option>
                {% for platform in platforms %}
                <option value = "{{ platform }}">{{ platform }}</option>
                {% endfor %}
            </select>
        </div>
        <div class = "mb-3">
            <label for = "streamerSelect" class = "form-label">选择音色</label>
            <select class = "form-select" id = "streamerSelect" onchange = "selectStreamer()">
                <option value = "">选择音色</option>
                {% for streamer in streamers %}
                <option value = "{{ streamer }}">{{ streamer }}</option>
                {% endfor %}
            </select>
        </div>
        <div class = "mb-3">
            <label for = "productSelect" class = "form-label">选择产品</label>
            <select class = "form-select" id = "productSelect" onchange = "selectProduct()">
                <option value = "">选择产品</option>
                {% for product in products %}
                <option value = "{{ product }}">{{ product }}</option>
                {% endfor %}
            </select>
        </div>
        <div class = "mb-3">
            <label for = "streamerSelect" class = "form-label">选择设备</label>
            <select class = "form-select" id = "deviceSelect" onchange = "selectDevice()">
                <option value = "">选择设备</option>
                {% for device in devices %}
                <option value = "{{ device }}">{{ device }}</option>
                {% endfor %}
            </select>
        </div>
        <div class = "mb-3">
            <label for = "volumeAdjustSelect" class = "form-label">音量调整</label>
            <select class = "form-select" id = "volumeAdjustSelect" onchange = "selectVolumeAdjust()">
                <option value = "">音量调整</option>
                {% for db in [95,90,85,80,75,70,65,60,55,50,45,40,35,30,25,20,15,10,5] %}
                <option value = "{{db}}">{{db}}%</option>
                {% endfor %}
            </select>
        </div>
        <div class = "form-floating mb-3">
          <textarea class = "form-control mb-3" placeholder = "Leave a comment here" id = "ip_address" style = "height: 100px"></textarea>
          <label for = "ip_address">输入AI电脑IP地址</label>
        </div>
        <div class = "mb-3">
            <button id = "startGetAudio" type = "button" class = "btn button btn-primary" onclick = "startGetAudio()">开始获取音频</button>
            <button id = "startPlayAudio" type = "button" class = "btn button btn-primary" onclick = "startPlayAudio()">开始播放音频</button>
            <button id = "startInsertMode" type = "button" class = "btn button btn-primary" onclick = "startInsertMode()">进入真人插话模式</button>
            <button id = "stopPlayAudio" class = "btn btn-danger" onclick = "stopPlayAudio()">停止直播</button>
            <button id = "clearAudio" class = "btn btn-danger" onclick = "clearAudio()">清空音频</button>
        </div>
        <div style = "height:2000px;"></div>
    </div>
    <img src = "{{ url_for('static', filename = 'playing.gif') }}" style="width:200px;position:fixed;left:50%;top:50%;margin-left:-100px;" id = 'AudioPlayingGif'>
    <img src = "{{ url_for('static', filename = 'humanSpeakingGif.gif') }}" style="width:200px;position:fixed;left:50%;top:50%;margin-left:-100px;" id = 'humanSpeakingGif'>
</body>
</html>